<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>大爷来玩啊</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
  <script src="../layui/layui.js" charset="utf-8"></script>
</head>
<body>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="toolbarDemo">
  <div class="demoTable">

    <div class="layui-inline">
      <input class="layui-input" name="id" placeholder="请输入部门编号或名称" id="demoReload" autocomplete="off">
    </div>
    <button class="layui-btn"  id="btnserach" lay-event="reload">搜索</button>
    <button class="layui-btn layui-btn-xm" lay-event="add">添加</button>
  </div>

</script>

<div id="updatediv" style="display:none">
  <form class="layui-form" action="" lay-filter="formTest">
    <div class="layui-form-item">
      <label class="layui-form-label">部门编号</label>
      <div class="layui-input-block">
        <input type="text" name="deptno" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">部门名称</label>
      <div class="layui-input-block">
        <input type="text" name="dname" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">部门地址</label>
      <div class="layui-input-block">
        <input type="text" name="loc" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
  </form>
</div>



<table class="layui-hide" id="test" lay-filter="test"></table>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>

    layui.use(['table','form'], function(){
        var table = layui.table;
        var $ = layui.$;
        var form = layui.form;

        var depttab = table.render({
            elem: '#test'
            ,url:'../dd/show'
            ,toolbar: '#toolbarDemo'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {field:'deptno', title: '编号', sort: true}
                ,{field:'dname', title: '部门名称'}
                ,{field:'loc', title: '部门地址', sort: true}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,page:true
            ,done: function(res,curr,count){
                $("#demoReload").val(res.deptno),
                    $("#demoReload").val(res.dname);
            }
        });





        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            if(obj.event === "add"){
                //form自动赋值
                form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                    "deptno": ""
                    ,"dname": ""
                    ,"loc": ""
                });
                var addlayer = layer.open({
                    type:1
                    ,anim:3
                    ,content:$('#updatediv')//这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });

                //提交
                form.on('submit(formDemo)',function (data){
                    layer.close(addlayer);
                    $.ajax({
                        url:"../dd/add"
                        ,type:"post"
                        ,data:data.field
                        ,success:function (d){
                            console.log(d,typeof(d));
                            if(d === 1){
                                layer.msg('添加已成功！！！', {
                                    icon: 1,
                                    time: 100 //2秒关闭（如果不配置，默认是3秒）
                                }, function(){
                                    //更新表格
                                    $("demoReload").val(null);
                                    depttab.reload();
                                });
                            }
                        }
                    });
                    return false;
                });
            }else if(obj.event === "reload"){
                //执行重载
                depttab.reload({
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        deptno: $('#demoReload').val()
                        ,dname: $('#demoReload').val()


                    }
                });
            }
        });
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    //obj.del();
                    $.ajax({
                        url:'../dd/del/'+data.deptno,
                        type:'delete',
                        success:function (d){
                            if(d === 1){
                                layer.msg('删除已成功！！！', {
                                    icon: 1,
                                    time: 100 //2秒关闭（如果不配置，默认是3秒）
                                }, function(){
                                    //更新表格
                                    $("demoReload").val(null);
                                    depttab.reload();
                                });
                            }

                        }
                    });

                });
            }else if(obj.event === 'edit'){
                var uplayer = layer.open({
                    type: 1
                    ,anim: 3
                    ,content: $('#updatediv') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                });

                //form自动赋值
                form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                    "deptno": data.deptno
                    ,"dname": data.dname
                    ,"loc": data.loc
                });

                //提交
                form.on('submit(formDemo)',function (data){
                    layer.close(uplayer);
                    $.ajax({
                        url:"../dd/update"
                        ,type:"post"
                        ,data:data.field
                        ,success:function (d){
                            console.log(d,typeof(d));
                            if(d === 1){
                                layer.msg('修改已成功！！！', {
                                    icon: 1,
                                    time: 100 //2秒关闭（如果不配置，默认是3秒）
                                }, function(){
                                    //更新表格
                                    $("demoReload").val(null);
                                    depttab.reload();
                                });
                            }
                        }
                    });
                    return false;
                });
            }
        });
    });
</script>

</body>
</html>